Manejo de información sensible
Flujo de integración
Para mostrar la información sensible o activar las tarjetas de tus usuarios tendrás que seguir estos pasos:
- Solicítanos un token de usuario final a Pomelo con el token que obtuviste en 'Autorización'. Ver Documentación
- Usa este nuevo token como query parameter embebiendo la web de Pomelo en tu UI.
- Configura los estilos que desees y los parámetros necesarios.
Mostrar la información sensible
Obtener información sensible de tarjeta
La web de data segura te permite mostrar la información sensible sobre una tarjeta en particular.
Deberás embeber esta página web mediante un iFrame html o un WebView enviando los parámetros necesarios.
Estilos
Podrás configurar una hoja de estilos para mostrar la información.
Importante: CORS debe estar habilitado para comunicarse con la dirección de la hoja de estilos.
La página se mostrará por default sin fondo para poder ser renderizada sobre otro componente.
Todos los componentes tienen un class-name único que al momento de recibir una URL de estilos tomarán el diseño que hayas definido.
La disposición de los campos variará según el parámetro layout que podrá ser en formato lista o tarjeta.
A continuación está la lista de los ids:
Card Layout
| CSS NAME | DESCRIPCIÓN |
|---|---|
| .card { ... } | Componente contenedor |
| .card .pan {} | Número de tarjeta |
| .card .pan .copy-icon {} | Botón para copiar |
| .card .name {} | Titular de la tarjeta |
| .card .expiration-date {} | Fecha de expiración |
| .card .security-code {} | Código de seguridad |
| .card .cvv-expiration-time {} | Tiempo de validez para dCVV |
| .card .pin {} | Número de Pin |
List Layout
| CSS NAME | DESCRIPCIÓN |
|---|---|
| .list { ... } | Componente contenedor |
| .list .pan {} | Número de tarjeta |
| .list .pan .label {} | Texto sobre el PAN |
| .list .pan .copy-icon {} | Botón para copiar |
| .list .name {} | Titular de la tarjeta |
| .list .name .label {} | Texto sobre NAME |
| .list .expiration-date {} | Fecha de expiración |
| .list .expiration-date .label {} | Texto sobre Exp Date |
| .list .security-code {} | Código de seguridad |
| .list .security-code .label {} | Texto sobre Código de seguridad |
| .list .cvv-expiration-time {} | Tiempo de validez para dCVV |
| .list .cvv-expiration-time .label {} | Texto sobre Expiracion de tiempo de validez |
| .list .pin {} | Número de Pin |
| .list .pin .label {} | Texto sobre PIN |
Consideraciones para integrar con un iframe
Para que funcione el botón de copiar deberás habilitar la escritura al portapapeles de la siguiente manera:
<iframe allow='clipboard-write' ... ></iframe>¿Te resultó útil esta sección?
Activar una tarjeta
Te daremos una web con un formulario para que tus clientes puedan activar su tarjeta ingresando los 16 dígitos (PAN) y el PIN de ser necesario.
Deberás embeber esta página web en tu sitio o app con un iframe HTML o un WebView enviando los parámetros necesarios.
Todos los textos del formulario estarán traducidos al idioma que nos indiques por parámetro.
Estilos
Podrás configurar una hoja de estilos para mostrar el formulario.
Importante: CORS debe estar habilitado para comunicarse con la dirección de la hoja de estilos.
La página se mostrará por default sin fondo para poder ser renderizada sobre otro componente.
Todos los componentes tienen un class-name único que al momento de recibir una URL de estilos tomarán el diseño que hayas definido.
A continuación está la lista de los ids:
CSS Classes
| CSS NAME | DESCRIPCIÓN |
|---|---|
| .activation-form { ... } | Componente contenedor |
| .activation-form .pan-input {} | Número de tarjeta |
| .activation-form .pin-input {} | PIN de la tarjeta |
| .activation-form .error-field {} | Errores de activación |
| .activation-form .submit-button {} | Botón de enviar |
Activación exitosa
Si la activación es exitosa, te redireccionaremos al link enviado que hayas enviado por parámetro.
Si estás usando una aplicación móvil podrás enviarnos un deep link para continuar el flujo de tu aplicación.
Manejo de errores
Si al momento de activar la tarjeta algo sale mal, mostraremos el error correspondiente y le pediremos al usuario final que vuelva a intentarlo hasta que pueda completar la activación.
Implementación en React Native
Para implementar el WebView en React Native y habilitar la ejecución del Deep Link es necesario configurar las siguientes propiedades del WebView
- Sobreescribir el método
onShouldStartLoadWithRequest - Sobreescribir el método
onNavigationStateChange - Habilitar la ejecución de código javascript
Snippet
const onShouldStartLoadWithRequest = (request: any) => {
return true;
}
const onNavigationStateChange = (event: any) => {
if(!event.url.includes('secure-data-web')){
Linking.openURL(event.url);
}
}
<WebView
source=uri: POMELO_URL
onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
onNavigationStateChange={onNavigationStateChange}
javaScriptEnabled={true}
/>Implementación en iOS nativo
Para implementar el WebView en Swift es necesario configurar el NavigationDelegate para manejar la ejecución del link
Snippet
webView.navigationDelegate = self
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
// Open URL
let url = (navigationAction.request.url)!
let scheme = url.scheme?.lowercased()
if scheme != 'https' && scheme != 'http' {
UIApplication.shared.open(url)
}
decisionHandler(.allow)
}